
import React from 'react';
import {Fragment} from 'react'  //虚拟文档碎片

import {
  connect  //用来连接前端界面和 model仓库的桥梁
} from 'dva'

// 获取数据接口
import {topics, mock1} from '../services/example'

class A1 extends React.Component{

  constructor(props) {
    super(props)
    this.state = {
      msg: "zhang"
    }
  }
  
  // 在组件中实现调接口的功能
  componentDidMount() {
    topics().then((res) => {
      console.log(res);  //这就取到数据了, 好牛逼啊
    })

    mock1().then(res => {
      console.log(res);
    })
  }

  // 要执行 modul 仓库中调接口操作, 的方法
  tops = () => {
    this.props.dispatch({
      type: "test/testCnode",  //参数可以不传
    })
  }

  hh() {  //配发同步任务
    this.props.dispatch({
      type: "test/setName",  //命名空间名称 + model 中的函数方法名
      data: {   //给payload传递的对象参数
        name: "猪猪侠"
      }
    })
  }

  hhA() {  //配发异步任务
    this.props.dispatch({
      type: "test/setNameAsync",  //命名空间名称 + model 中的函数方法名
      data: {   //给payload传递的对象参数
        name: "菲菲公主"
      }
    })
  }

  render() {

    // do something

    // 组件视图
    return (
      <Fragment>

        我是首页 

        {this.props.msg}
        {this.props.name}
        <button onClick={this.hh.bind(this)}> 改名字 </button>
        <button onClick={this.hhA.bind(this)}> 改名字 Async </button>  <br/>
        <button onClick={this.tops}> 调接口 </button>
      </Fragment>
    )
  }
}


// 这个被 connect高阶组件修饰过的箭头函数, 可以访问到所有 model 仓库中的数据
// 但是要记得, 想要修改数据, 需要通过调用 model 中的方法来修改
const mapStateToProps = state => {
  console.log(state, 666);  // 当前位置可访问, model 中的 state
  return {
    msg: "999",  // 也可以用来定义数据

    // 我们要做的是把 model 中的数据, 存储在这个对象中 --> 然后 UI组件A1, 也就是当前组件就可以访问使用了
    name: state.test.name  // 
  }
}


export default connect(mapStateToProps)(A1)











// 以下是模板代码

// import React from 'react';
// import { connect } from 'dva';
// import styles from './IndexPage.css';

// function IndexPage() {
//   return (
//     <div className={styles.normal}>
//       <h1 className={styles.title}>Yay! Welcome to dva!</h1>
//       <div className={styles.welcome} />
//       <ul className={styles.list}>
//         <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
//         <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
//       </ul>
//     </div>
//   );
// }

// IndexPage.propTypes = {
// };

// export default connect()(IndexPage);
